import { IFormState, ITableData } from "./types.ts";
import { ITableCHandle, ITableColumn } from "@/utils/types/table.ts";
import { computed, reactive, ref, watch } from "vue";
import { FormOption } from "@/components/autoForm/types/componentTypes.ts";

export const serchOptions = [
  { label: "菜单名称", value: "menuName", type: "input" },
];

export const columns: ITableColumn[] = [
  {
    title: "菜单名称",
    dataIndex: "menuName",
    key: "menuName",
  },
  {
    title: "排序",
    dataIndex: "orderNum",
    key: "orderNum",
  },
  {
    title: "路由地址",
    dataIndex: "path",
    key: "path",
  },
  {
    title: "组件路径",
    dataIndex: "component",
    key: "component",
  },
  {
    title: "权限标识",
    dataIndex: "perms",
    key: "perms",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    fixed: "right",
    handle: [
      {
        title: "增加",
        hasPermi: ["system:menu:add"],
        normal: true, // 正常显示
        funp: ["handleAdd", "add"], // [操作方法，新增或编辑]
      },
      {
        title: "修改",
        hasPermi: ["system:menu:edit"],
        normal: true, // 正常显示
        funp: ["handleAdd", "update"], // [操作方法，新增或编辑]
      },
      {
        title: "删除",
        hasPermi: ["system:menu:remove"],
        normal: true, // 正常显示
        funp: ["handleDelete", "/system/menu"], // [操作方法，新增或编辑]
      },
    ] as ITableCHandle[],
  },
];

const menuComponentHide = ref<boolean>(true);
const menuPathtHide = ref<boolean>(false);
const menuPersHide = ref<boolean>(true);
const menuKeyHide = ref<boolean>(true);
const menuIconHide = ref<boolean>(false);
const menuVisibleHide = ref<boolean>(false);

export const addOptions = computed<FormOption<IFormState>[]>(() => {
  const o: FormOption<IFormState>[] = [
    {
      label: "上级菜单",
      field: "parentId",
      type: "custom",
    },
    {
      label: "菜单类型",
      field: "menuType",
      type: "radio",
      props: {
        options: [
          { label: "目录", value: "M" },
          { label: "菜单", value: "C" },
          { label: "按钮", value: "F" },
        ],
      },
    },
    {
      label: "菜单图标",
      field: "icon",
      type: "input",
      hide: menuIconHide.value,
    },
    {
      label: "菜单名称",
      field: "menuName",
      type: "input",
      rules: [{ required: true, message: "请输入菜单名称" }],
    },
    {
      label: "排序",
      field: "orderNum",
      type: "inputNumber",
      rules: [{ required: true, message: "请输入排序" }],
    },
    {
      label: "显示状态",
      field: "visible",
      type: "radio",
      hide: menuVisibleHide.value,
      props: {
        options: [
          { label: "显示", value: "0" },
          { label: "隐藏", value: "1" },
        ],
      },
    },
    {
      label: "路由地址",
      field: "path",
      type: "input",
      hide: menuPathtHide.value,
    },
    {
      label: "组件路径",
      field: "component",
      type: "input",
      hide: menuComponentHide.value,
    },
    {
      label: "高亮菜单",
      field: "menuKey",
      type: "input",
      hide: menuKeyHide.value,
    },
    {
      label: "权限标识",
      field: "perms",
      type: "input",
      hide: menuPersHide.value,
    },
  ];
  return o;
});

export const initFormData: Partial<IFormState> = {
  parentId: 0,
  menuType: "M",
  icon: "",
  menuName: "",
  orderNum: null,
  path: "",
  component: "",
  perms: "",
  menuId: null,
  visible: "0",
  menuKey: "",
};

export const formState = reactive<IFormState>(
  JSON.parse(JSON.stringify(initFormData)),
);

watch(
  () => formState.menuType!,
  (newVal: string) => {
    if (newVal === "C") {
      // 菜单
      menuComponentHide.value = false;
      menuPathtHide.value = false;
      menuPersHide.value = false;
      menuKeyHide.value = false;
      menuIconHide.value = false;
      menuVisibleHide.value = false;
    } else if (newVal === "M") {
      // 目录
      menuComponentHide.value = true;
      menuPathtHide.value = false;
      menuPersHide.value = false;
      menuKeyHide.value = true;
      menuIconHide.value = false;
      menuVisibleHide.value = false;
    } else {
      // 按钮
      menuComponentHide.value = true;
      menuPathtHide.value = true;
      menuIconHide.value = true;
      menuKeyHide.value = true;
      menuIconHide.value = true;
      menuVisibleHide.value = true;
    }
  },
);

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data: ITableData[] | undefined): ITableData[] {
  //对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data));
  //循环所有项
  const treeData = cloneData.filter((father: ITableData) => {
    const branchArr = cloneData.filter((child: ITableData) => {
      //返回每一项的子级数组
      return father.menuId === child.parentId;
    });
    branchArr.length > 0 ? (father.children = branchArr) : "";
    //返回第一层
    return father.parentId === 0;
  });
  return treeData !== "" ? treeData : data;
}

/**
 * children[]时不显示children
 * @param {Array} data tree结构数据
 */
export function handleTreeFormat(data: ITableData[]): ITableData[] {
  data.forEach((item: ITableData) => {
    if (item.children && item.children.length) {
      handleTreeFormat(item.children);
    } else {
      delete item.children;
    }
  });

  return data;
}
